<!--<template>-->
<!--  <div class="indoorMap">-->
<!--    <div id="map"></div>-->
<!--    <floor-switch @itemClick="getCurrentData"></floor-switch>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import FloorSwitch from "@/components/floorSwitch/FloorSwitch";-->

<!--import getMap from "@/components/network/map.js";-->
<!--import L from "leaflet";-->
<!--// Vue 2 中用这个-->
<!--// import geojson from "../../../public/data/zhengjiaF3.json";-->

<!--export default {-->
<!--  name: "IndoorMap",-->
<!--  components: {-->
<!--    FloorSwitch,-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      map: {},-->
<!--      data: {},-->
<!--      centerMarker: null,-->
<!--      // startPoint: null,-->
<!--      // endPoint: null,-->
<!--      // startMarker: null,-->
<!--      // endMarker: null,-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    //创建地图-->
<!--    mapCreat() {-->
<!--      // this.map = L.map('map').setView([51.505, -0.09], 13);-->
<!--      this.map = new L.Map("map", {-->
<!--        // center: [29.13738274763666, 119.64258050574858],-->
<!--        // // zoom: 18,-->
<!--        // zoomSnap: 0.1,-->
<!--        maxZoom: 23, // 放大的极限（数值越大，能放的越大）-->
<!--        minZoom: 18, // 缩小的极限（数值越小，能缩的越小）-->
<!--        // // 地理围栏-->
<!--        // maxBounds: ([[23.132846036559536, 113.31956015729906], [23.13665645841917, 113.32355572080614]]),-->
<!--        // zoomControl: false-->
<!--      });-->
<!--      // 使地图zoom适应手机显示-->
<!--      // this.map.fitBounds([[23.13565645841917, 113.32255572080614], [23.133846036559536, 113.32056015729906]], {-->
<!--      //   paddingTopLeft: [10, 10],-->
<!--      //   paddingBottomRight: [10, 10]-->
<!--      // })-->
<!--      this.map.fitBounds(-->
<!--          [-->
<!--            [29.136875128934506, 119.6434661580335],-->
<!--            [29.1375674533099, 119.6422646580578],-->
<!--          ],-->
<!--          {-->
<!--            paddingTopLeft: [10, 10],-->
<!--            paddingBottomRight: [10, 10],-->
<!--          }-->
<!--      );-->
<!--    },-->
<!--    //添加数据-->
<!--    addLayer(data) {-->
<!--      this.map.eachLayer((layer) => {-->
<!--        layer.remove();-->
<!--      });-->
<!--      console.log(data);-->
<!--      const map = this.map;-->

<!--      L.geoJSON(data.waiKuangMian, {-->
<!--        style() {-->
<!--          return {-->
<!--            fillColor: "#ffffff",-->
<!--            color: "#fdf9f2",-->
<!--            weight: 3,-->
<!--            fillOpacity: 0.8,-->
<!--          };-->
<!--        },-->
<!--      }).addTo(map);-->
<!--      let startPoint = null;-->
<!--      let endPoint = null;-->
<!--      let startMarker = null; // 存储起点标记-->
<!--      let endMarker = null; // 存储终点标记-->
<!--      let polyline = null; // 存储绘制的路径线-->
<!--      L.geoJSON(data, {-->
<!--        style(feature) {-->
<!--          // 可根据 feature.properties 设置颜色样式-->
<!--          return {-->
<!--            fillColor: feature.properties.fill || "#feebcd",-->
<!--            color: feature.properties.stroke || "#919191",-->
<!--            weight: feature.properties["stroke-width"] || 1,-->
<!--            fillOpacity: feature.properties["fill-opacity"] || 0.8,-->
<!--          };-->
<!--        },-->
<!--        // onEachFeature(feature, layer) {-->
<!--        //   layer.on(-->
<!--        //     "click",-->
<!--        //     function () {-->
<!--        //       // 获取多边形边界中心-->
<!--        //       const center = layer.getBounds().getCenter();-->
<!--        //       // 移动地图到中心点-->
<!--        //       // map.flyTo(center, 19); // 可调整缩放级别-->
<!--        //       // 自定义图标-->
<!--        //       const myIcon = L.icon({-->
<!--        //         iconUrl: "./img/start.png",-->
<!--        //         iconSize: [32, 32],-->
<!--        //         iconAnchor: [16, 32],-->
<!--        //       });-->
<!--        //       // 移除旧的图标-->
<!--        //       if (this.centerMarker) {-->
<!--        //         map.removeLayer(this.centerMarker);-->
<!--        //       }-->
<!--        //       // 添加新的图标-->
<!--        //       this.centerMarker = L.marker(center, { icon: myIcon }).addTo(map);-->
<!--        //       // 可选：添加弹窗-->
<!--        //       if (feature.properties && feature.properties.name) {-->
<!--        //         // this.centerMarker-->
<!--        //         //   .bindPopup(`你点击了：${feature.properties.name}`)-->
<!--        //         //   .openPopup();-->
<!--        //       }-->
<!--        //     }.bind(this)-->
<!--        //   ); // 绑定 this，确保能访问 this.map-->
<!--        // },-->
<!--        onEachFeature(feature, layer) {-->
<!--          layer.on("click", function () {-->
<!--            // 获取当前点击区域的中心点-->
<!--            const center = layer.getBounds().getCenter();-->

<!--            // 第一次点击，设置为起点-->
<!--            if (!startPoint) {-->
<!--              startPoint = center;-->
<!--              // 如果之前已经有起点标记，先移除-->
<!--              if (startMarker) {-->
<!--                map.removeLayer(startMarker);-->
<!--              }-->
<!--              const myIcon = L.icon({-->
<!--                iconUrl: "img/start.png",-->
<!--                iconSize: [32, 32],-->
<!--                iconAnchor: [16, 32],-->
<!--              });-->
<!--              startMarker = L.marker(startPoint, { icon: myIcon }).addTo(map);-->
<!--            }-->
<!--            // 第二次点击，设置为终点并绘制路线-->
<!--            else {-->
<!--              endPoint = center;-->
<!--              // 如果之前已经有终点标记，先移除-->
<!--              if (endMarker) {-->
<!--                map.removeLayer(endMarker);-->
<!--              }-->
<!--              const myIcon = L.icon({-->
<!--                iconUrl: "img/end.png",-->
<!--                iconSize: [32, 32],-->
<!--                iconAnchor: [16, 32],-->
<!--              });-->
<!--              endMarker = L.marker(endPoint, { icon: myIcon }).addTo(map);-->

<!--              // 绘制从起点到终点的路径-->
<!--              if (startPoint && endPoint) {-->
<!--                // 如果已经有一条路径，先移除-->
<!--                if (polyline) {-->
<!--                  map.removeLayer(polyline);-->
<!--                }-->

<!--                polyline = L.polyline([startPoint, endPoint], {-->
<!--                  color: "blue",-->
<!--                  weight: 4,-->
<!--                }).addTo(map);-->
<!--              }-->

<!--              // 重置起点和终点，准备下次点击-->
<!--              startPoint = null;-->
<!--              endPoint = null;-->
<!--            }-->
<!--          });-->
<!--        },-->
<!--      }).addTo(map);-->
<!--      // L.geoJSON(data.louKongMian,{-->
<!--      //   style() {-->
<!--      //     return {-->
<!--      //       fillColor: "#e6e6e6",-->
<!--      //       color: "#919191",-->
<!--      //       weight: 1,-->
<!--      //       fillOpacity: 0.8-->
<!--      //     }-->
<!--      //   }-->
<!--      // }).addTo(this.map)-->
<!--      // L.geoJSON(data.danYuanMian,{-->
<!--      //   style() {-->
<!--      //     return {-->
<!--      //       fillColor: "#feebcd",-->
<!--      //       color: "#919191",-->
<!--      //       weight: 1,-->
<!--      //       fillOpacity: 0.8-->
<!--      //     }-->
<!--      //   }-->
<!--      // }).addTo(this.map)-->
<!--      // L.geoJSON(data.gongGongDian,{-->
<!--      //   // style() {-->
<!--      //   //   return {-->
<!--      //   //     fillColor: "#feebcd",-->
<!--      //   //     color: "#919191",-->
<!--      //   //     weight: 1,-->
<!--      //   //     fillOpacity: 0.8-->
<!--      //   //   }-->
<!--      //   // },-->

<!--      //   fliter:function(feature,layer){-->
<!--      //     console.log("12313");-->
<!--      //     console.log(feature.properties)-->
<!--      //     return feature.properties.NAME;-->
<!--      //   }-->
<!--      // }).addTo(this.map)-->
<!--    },-->
<!--    //楼层切换-->
<!--    getCurrentData(item) {-->
<!--      let url = "zhengjia" + item + ".json";-->
<!--      getMap(url).then((res) => {-->
<!--        this.data = res;-->
<!--      });-->
<!--    },-->
<!--  },-->
<!--  created() {-->
<!--    //获取数据-->
<!--    getMap("zhengjiaF3.json").then((res) => {-->
<!--      this.data = res;-->
<!--    });-->
<!--  },-->
<!--  mounted() {-->
<!--    this.mapCreat();-->
<!--  },-->
<!--  watch: {-->
<!--    //监听数据变化创建地图-->
<!--    data(val) {-->
<!--      this.addLayer(val);-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--#map {-->
<!--  width: 100%;-->
<!--  /* height: 100%; */-->
<!--  height: 100vh;-->
<!--  /*background-color: green;*/-->
<!--  position: fixed;-->
<!--  left: 0;-->
<!--  top: -30%;-->
<!--  /*z-index: -1;*/-->
<!--  touch-action: none; /* 防止浏览器默认滑动冲突 解决手机模式下不能滑动问题*/-->
<!--}-->
<!--</style>-->
